import 'package:eh_mobile/common/utils/extension.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../common/utils/enums.dart';
import '../../../../common/utils/screen_util.dart';
import '../controller.dart';

class CenterHomeWidget extends StatefulWidget {
  const CenterHomeWidget({Key? key}) : super(key: key);

  @override
  State<CenterHomeWidget> createState() => _CenterHomeWidgetWidgetState();
}

class _CenterHomeWidgetWidgetState extends State<CenterHomeWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const _CenterWidgetViewGetX();
  }
}

class _CenterWidgetViewGetX extends GetView<HomepageController> {
  const _CenterWidgetViewGetX({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Container(
        // 外边距
        margin: const EdgeInsets.only(left: 14, right: 14, top: 14, bottom: 14),
        // BoxDecoration 实现圆形、圆角、下划线、阴影、渐变色背景
        decoration: const BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.all(Radius.circular(14.0)),
            boxShadow: [
              BoxShadow(
                color: Color.fromARGB(137, 161, 153, 153),
                blurRadius: 10, // 模糊半径为10
              ),
            ]),
        child: SingleChildScrollView(
            padding:
                const EdgeInsets.only(left: 14, right: 14, top: 4, bottom: 14),
            child: Obx(() => Wrap(
                  direction: Axis.horizontal,
                  spacing: 10,
                  children: _buildCenterHomeItems(),
                ))));
  }

  //中间控制区域房间布局
  List<Widget> _buildCenterHomeItems() {
    List<Widget> items = [];

    var itemWidth = ScreenUtils().screenWidth - 28 - 28;

    for (var i = 0; i < controller.state.regionListModels.length; i++) {
      GestureDetector widget = GestureDetector(
        child: Container(
          alignment: Alignment.center,
          margin: const EdgeInsets.only(top: 10),
          width: i % 3 == 0 ? itemWidth : (itemWidth - 10) / 2.0,
          height: (itemWidth - 10) / 2.0,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
                width: 1, color: const Color.fromARGB(137, 161, 153, 153)),
            borderRadius: const BorderRadius.all(Radius.circular(8.0)),
          ),
          child: Text(controller.state.regionListModels[i].name!, style: 14.ts),
        ),
        onTap: () {
          var homeName = controller.state.regionListModels[i].name;
          controller.navigatorHomeInfo(DeviceLListType.light);
        },
      );
      items.add(widget);
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomepageController>(
      init: HomepageController(),
      id: "center_widget",
      builder: (_) {
        return SafeArea(
          child: _buildView(),
        );
      },
    );
  }
}
